<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 使用定时器完成下雨特效 -->
    <canvas id="canvas" width="1440" height="900"></canvas>
    <script>
      window.onload = function () {
        //获取画布对象
        var canvas = document.getElementById('canvas')
        //获取画布的上下文
        var context = canvas.getContext('2d')
        var s = window.screen
        var W = (canvas.width = s.width)
        var H = canvas.height
        //设置canvas的宽度和高度
        canvas.width = W
        canvas.height = H
        //每个文字的字体大小
        var fontSize = 12
        //计算列
        var colunms = Math.floor(W / fontSize)
        //记录每列文字的y轴坐标
        var drops = []
        //给每一个文字初始化一个起始点的位置
        for (var i = 0; i < colunms; i++) {
          drops.push(0)
        }
        //运动的文字
        var str = 'WOYONGYUANXIANGWANGZIYOU'
        //绘画的函数
        function draw() {
          context.fillStyle = 'rgba(238,238,238,.08)' //遮盖层
          context.fillRect(0, 0, W, H)
          //给字体设置样式
          context.font = '600 ' + fontSize + 'px'
          //给字体添加颜色
          context.fillStyle = ['#33B5E5', '#0099CC', '#AA66CC', '#9933CC', '#99CC00', '#669900', '#FFBB33', '#FF8800', '#FF4444', '#CC0000'][
            //randColor();可以rgb,hsl, 标准色，十六进制颜色
            parseInt(Math.random() * 10)
          ]
          //写入画布中
          for (var i = 0; i < colunms; i++) {
            var index = Math.floor(Math.random() * str.length)
            var x = i * fontSize
            var y = drops[i] * fontSize
            context.fillText(str[index], x, y)
            //如果要改变时间，肯定就是改变每次他的起点
            if (y >= canvas.height && Math.random() > 0.99) {
              drops[i] = 0
            }
            drops[i]++
          }
        }
        draw()
        setInterval(draw, 35)
      }
    </script>
  </body>
</html>
